<script setup lang="ts">
  import { ref } from "vue";
  import { arr2tree } from "@/util";
  import Dialog from "@/components/sql/Dialog.vue";
  const
    data = ref<gt.sql.group[]>([]),
    entity = ref<InstanceType<typeof Dialog>>(),
    main = ref<HTMLDivElement>(),
    tip = ref([
      { label: "添加分组", value: 0, cls: "mac-ico-add-round", per: api.me.per("用户分组创建") },
      { label: "编辑分组", value: 1, cls: "mac-ico-edit", per: api.me.per("用户分组修改") },
      { label: "查看分组", value: 2, cls: "mac-ico-search", per: true },
      { label: "删除分组", value: 3, cls: "mac-ico-delete", per: api.me.per("用户分组删除") },] as const);
  (async function init() {
    const loading = ElLoading.service({ text: "正在加载,请稍后...", target: main.value });
    data.value = await gd.groupTree;
    loading.close();
  })();
  async function click(type: gt.curd, p?: gt.sql.group) {
    if (type == 0 && p) {
      p = Object.assign(format.def.group, { pid: p.id, permission: p.permission });
    }
    if (!p) {
      p = format.def.group;
    }
    entity.value?.open("group", type, p);
  }
  async function confirm() {
    const loading = ElLoading.service({ text: "正在加载,请稍后...", target: main.value });
    data.value = arr2tree(await gd.group.read(), "id", "pid", 1);
    loading.close();
  }
</script>
<template>
  <div class="fg1 y oh group" ref="main">
    <el-button class="mac-ico-add-round" type="primary" @click="click(0)" v-if="tip[0].per">新增分组</el-button>
    <el-table :data="data" class="wf fg1" type="expand" row-key="id">
      <el-table-column prop="id" label="id" width="100" show-overflow-tooltip />
      <el-table-column prop="pid" label="上级id" width="100" show-overflow-tooltip />
      <el-table-column prop="_createTime" label="创建时间" width="120" show-overflow-tooltip />
      <el-table-column prop="name" label="名称" show-overflow-tooltip />
      <el-table-column prop="state" label="状态" width="100" show-overflow-tooltip />
      <el-table-column label="操作" width="160">
        <template #default="{ row }">
          <div class="buttons x zb">
            <template v-for="a in tip">
              <el-tooltip v-if="a.per" :content="a.value ? a.label : '添加下级分组'">
                <div :class="a.cls" @click.stop="click(a.value, row)" />
              </el-tooltip>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Dialog @confirm="confirm" ref="entity" />
  </div>
</template>
<style lang="scss" scoped>
  .group {
    position: relative;

    .buttons {
      >div {
        cursor: pointer;
        padding: 0 0.4em;
        font-weight: 600;
        &:hover {
          border: 1px solid #a5a5a5;
          box-sizing: border-box;
          border-radius: 0.5em;
          box-shadow: 0 0 10px #000;
        }
      }
      >.mac-ico-add-round {
        color: var(--color-success);
      }
      >.mac-ico-edit {
        color: var(--color-warning);
      }
      >.mac-ico-search {
        color: var(--color-primary);
      }
      >.mac-ico-delete {
        color: var(--color-error);
      }
    }
  }
</style>